<template>
  <div class="register_particles cz-px-2">
    <div class="register_wrapper max-md:cz-hidden">
      <div class="register_wrapper_text">
        <h3 class="cz-select-none cz-p-2">
          十七
        </h3>
        <p class="cz-select-none">
          在黑暗中看到了微光，朝着光明去前行
        </p>
      </div>
    </div>
    <div class="register_content">
      <div class="register_content_nav max-md:cz-w-full cz-w-[480px]">
        <div class="reg-guide_login">
          <h3 class="cz-p-2">
            leisure 欢迎您
          </h3>
          <p>
            "已有账号？"
            <el-link
              type="primary"
              @click="toLogin"
            >
              登录
            </el-link>
          </p>
        </div>
        <el-alert
          v-if="websiteConfig.isRegistry!==YES_OR_NO_ENUM.YES"
          title="已被管理员禁止注册新账号！"
          :closable="false"
          type="warning"
        />
        <div class="reg-content">
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="20"
            status-icon
          >
            <el-form-item
              prop="username"
            >
              <el-input
                v-model.trim="ruleForm.username"
                autocomplete="off"
                clearable
                placeholder="请输入用户名"
                prefix-icon="User"
                size="large"
              />
            </el-form-item>

            <el-form-item
              prop="account"
            >
              <el-input
                v-model.trim="ruleForm.account"
                autocomplete="off"
                clearable
                placeholder="请输入昵称"
                prefix-icon="User"
                size="large"
              />
            </el-form-item>

            <el-form-item
              prop="password"
            >
              <el-input
                v-model.trim="ruleForm.password"
                autocomplete="off"
                clearable
                placeholder="请输入密码"
                prefix-icon="Lock"
                size="large"
                type="password"
              />
            </el-form-item>
            <el-form-item
              prop="accPassword"
            >
              <el-input
                v-model.trim="ruleForm.accPassword"
                autocomplete="off"
                clearable
                placeholder="再次输入密码"
                prefix-icon="Lock"
                size="large"
                type="password"
              />
            </el-form-item>
            <el-form-item
              v-if="websiteConfig.isRegistryCode === YES_OR_NO_ENUM.YES"
              prop="code"
            >
              <el-input
                v-model.number="ruleForm.code"
                clearable
                placeholder="验证码"
                prefix-icon="CircleCheck"
                size="large"
              >
                <template #append>
                  <el-image
                    alt="验证码"
                    class="cz-w-[100px] cz-h-10"
                    :src="captcha.imageBase"
                    @click="handleGetCaptcha"
                  />
                </template>
              </el-input>
            </el-form-item>
            <el-button
              :disabled="websiteConfig.isRegistry!==YES_OR_NO_ENUM.YES"
              class="register_button"
              size="large"
              type="primary"
              @click="handleRegister"
            >
              立即注册
            </el-button>
          </el-form>
        </div>
      </div>
    </div>
  </div>
  <div class="wallpaper">
    <video
      ref="videoRef"
      muted
      autoplay
      loop
    >
      <source
        src="../assets/video.mp4"
        type="video/mp4"
      >
    </video>
  </div>
</template>

<script lang="ts" setup>
import { useCloneDeep } from 'co-utils-vue';
import { ElMessage, FormInstance } from 'element-plus';
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';

import { getSystemCaptcha } from '@/api/system';
import { ISystemCaptcha, IWebsite } from '@/api/system/type';
import { userRegistry } from '@/api/user';
import { YES_OR_NO_ENUM } from '@/constant';
import { useSystemStore } from '@/hooks/store';

const router = useRouter();
const websiteConfig = ref({} as IWebsite.Data);
const captcha = ref({} as ISystemCaptcha.Data);
const systemStore = useSystemStore();
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  username: '',
  password: '',
  accPassword: '',
  account: '',
  code: '',
  codeKey: 0
});

const validateAccPassword = (rule: any, value: any, callback: any) => {
  // const reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
  if (value === '') {
    callback(new Error('请输入确认密码'));
  } else if (value !== ruleForm.password) {
    callback(new Error('两次密码不一致'));
  }
  callback();
};

const validateAccount = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入账号'));
  } else {
    callback();
  }
};
const validatePassword = (_rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'));
  }
  callback();
};

const validateUsername = (_rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入名称'));
  }
  callback();
};

const rules = ref({
  account: [{ required: true, validator: validateAccount, trigger: 'blur' }],
  password: [{ required: true, validator: validatePassword, trigger: 'blur' }],
  username: [{ required: true, validator: validateUsername, trigger: 'blur' }],
  code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
  accPassword: [{ required: true, validator: validateAccPassword, trigger: 'blur' }]
});
const handleGetCaptcha = async () => {
  captcha.value = await getSystemCaptcha();
};
const handleRegister = async () => {
  await ruleFormRef.value!.validate();
  const form = useCloneDeep(ruleForm);
  await userRegistry({
    ...form
  });
  ElMessage.success('注册成功');
  setTimeout(async () => {
    router.back();
  }, 1000);
};
const handleWebsiteConfig = async () => {
  websiteConfig.value = await systemStore.getWebsite();
  if (websiteConfig.value.isCode === YES_OR_NO_ENUM.YES) {
    await handleGetCaptcha();
  }
};
onMounted(() => {
  handleWebsiteConfig();
});
const toLogin = () => {
  router.back();
};

</script>

<style lang="scss" scoped>
.wallpaper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 确保视频在其他内容之后显示 */
}

video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.register_particles {
  //background: url("https://passport.baidu.com/static/passpc-account/img/reg_bg_min.jpg") no-repeat;
  width: 100%;
  height: 100vh;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;

  .register_wrapper {
    flex: 3;

    .register_wrapper_text {
      transform: translate(30%, -100%);
      color: white;

      h3 {
        padding: 0;
        margin: 0;
        font-size: 54px;
        letter-spacing: 0;
        font-weight: 700;
      }

      p {
        margin: 0;
        font-size: 32px;
        letter-spacing: 3.81px;
        font-weight: 300;
      }
    }
  }

  .register_content {
    flex: 2;

    .register_content_nav {
      background: rgba(var(--bs-body-bg-rgb), .9);
      border-radius: 12px;

      .reg-guide_login {
        margin: 50px 0 22px 39px;

        h3 {
          font-size: 36px;
          margin: 0;
        }

        p {
          font-size: 14px;
          color: #9B9B9B;
        }
      }

      .reg-content {
        padding: 30px 40px 10px 40px;

        .register_button {
          border-radius: 25px;
          height: 50px;
          width: calc(100% - 25px);
          margin: 20px 0 20px 20px;
        }
      }
    }
  }

  :deep(.el-form-item--small ) {
    font-size: 16px;
  }

  :deep( .el-form-item--small .el-form-item__label) {
    line-height: 34px;
  }

  :deep(.register_content .el-input-group__append) {
    padding: 0;
    overflow: hidden;
  }
}
</style>
